Customization of Conversion between the Data Source and UI Components

This documentation is for an older version of ZK. For the latest one, please click here.

This documentation is for an older version of ZK. For the latest one, please click here.

If you want to do the conversion between the Data Source and UI components by yourself, you could specify the class name of the converter in the converter tag expression to tell Data Binding Manager to use your own way to do the conversion between the data source and UI components.

<component-name attribute-name="@{bean-name.attribute- name,converter='class-name'}"/>

Multiple definition is NOT allowed and the later defined would override the previous defined one.

1. Define a class that implements TypeConverter with the following methods

• coerceToUI, converts an value object into UI component attribute type.
• coerceToBean, converts an value object to bean property type.

1. Specify the class name of converter into the converter tag expression
   In the following example, we demonstrate you how to convert a boolean value into different images instead of pure text.
   First of all, you have to define a class that implements TypeConverter. myTypeConverter converts the boolean into different images accordingly.
   

import org.zkoss.zkplus.databind.TypeConverter;
import org.zkoss.zul.Listcell;

public class myTypeConverter implements TypeConverter {
	public Object coerceToBean(java.lang.Object val,
			org.zkoss.zk.ui.Component comp) {
		return null;
	}

	public Object coerceToUi(java.lang.Object val,
			org.zkoss.zk.ui.Component comp) {
		boolean married = (Boolean) val;
		if (married)
			((Listcell) comp).setImage("/img/true.png");
		else
			((Listcell) comp).setImage("/img/false.png");
		return null;
	}
}

Specify myTypeConverter with the convert tag expression to be associated with the married attribute of Person instance.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<window width="500px">
	<zscript><![CDATA[
     //prepare the example persons List
     List persons = new ArrayList();
     persons.add(new Person("Tom", "Yeh", true));
     persons.add(new Person("Henri", "Chen", true));
     persons.add(new Person("Jumper", "Chen", false));
     persons.add(new Person("Robbie", "Cheng", false));
     ]]>
	</zscript>

	<listbox rows="4" model="@{persons}">
		<listhead>
			<listheader label="First Name" width="100px" />
			<listheader label="Last Name" width="100px" />
			<listheader label="Married" width="100px" />
		</listhead>
		<listitem self="@{each=person}">
			<listcell label="@{person.firstName}" />
			<listcell label="@{person.lastName}" />
			<listcell
				label="@{person.married, converter='myTypeConverter'}" />
		</listitem>
	</listbox>
</window>

Version History

Version	Date	Content